<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-container">
      <div>
        <h2>按钮主题</h2>
        <button class="layui-btn layui-btn-primary">原始按钮 layui-btn-primary</button>
        <button class="layui-btn">默认按钮 layui-btn</button>
        <button class="layui-btn layui-btn-normal">百搭按钮 layui-btn-normal</button>
        <button class="layui-btn layui-btn-warm">暖色按钮 layui-btn-warm</button>
        <button class="layui-btn layui-btn-danger">警告按钮 layui-btn-danger</button>
        <button class="layui-btn layui-btn-disabled">禁用按钮 layui-btn-disabled</button>
      </div>
      <div>
        <h2>原生按钮（镂空） 边框</h2>
        <button class="layui-btn layui-btn-primary layui-border-green">主色 layui-border-green</button>
        <button class="layui-btn layui-btn-primary layui-border-blue">百搭 layui-border-blue</button>
        <button class="layui-btn layui-btn-primary layui-border-orange">暖色 layui-border-orange</button>
        <button class="layui-btn layui-btn-primary layui-border-red">警告 layui-border-red</button>
        <button class="layui-btn layui-btn-primary layui-border-black">深色 layui-border-black</button>
      </div>
      <div>
        <h2>尺寸</h2>
        <button class="layui-btn layui-btn-lg">大型按钮</button>
        <button class="layui-btn">默认按钮</button>
        <button class="layui-btn layui-btn-sm">小型按钮</button>
        <button class="layui-btn layui-btn-xs">超小型按钮</button>
      </div>
      <div>
        <h2>最大化适应 流体按钮</h2>
        <button class="layui-btn layui-btn-fluid">流体按钮</button>
      </div>
      <div>
        <h2>圆角</h2>
        <button class="layui-btn layui-btn-radius">圆角</button>
      </div>
      <div>
        <h2>按钮组</h2>
        <div class="layui-btn-group">
          <button type="button" class="layui-btn layui-btn-sm">
            <i class="layui-icon">&#xe654;</i>
          </button>
          <button type="button" class="layui-btn layui-btn-sm">
            <i class="layui-icon">&#xe642;</i>
          </button>
          <button type="button" class="layui-btn layui-btn-sm">
            <i class="layui-icon">&#xe640;</i>
          </button>
          <button type="button" class="layui-btn layui-btn-sm">
            <i class="layui-icon">&#xe602;</i>
          </button>
        </div>
      </div>
      <div>
        <h2>按钮容器</h2>
        <div class="layui-btn-container">
          <button type="button" class="layui-btn">按钮一</button>
          <button type="button" class="layui-btn">按钮二</button>
          <button type="button" class="layui-btn">按钮三</button>
        </div>
      </div>
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script></script>
  </body>
</html>
